<template>
  <view>
    <view-tabbar :current="current"></view-tabbar>
    <view class="navBox">
      <text>订单</text>
    </view>
    <view class="submit">
      <button class="submitButton" @click="confirm()" v-if="orderList.length!==0&&navIndex===0">提交订单</button>
    </view>
    <uni-popup ref="popup" type="dialog" class="popup">
      <uni-popup-dialog message="成功消息" :duration="2000"   :before-close="true"
                        @close="close" @confirm="finishOrder">
         请确定已取餐
      </uni-popup-dialog>
    </uni-popup>

    <!--顶部导航栏-->
    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
      <view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
            :class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
        {{ tab.name }}
      </view>
    </scroll-view>

    <!-- 内容 -->
    <swiper :current="navIndex" @change="tabChange" class="content">
      <swiper-item class="swiper_item">
        <scroll-view class="recommendDetails" scroll-y="true">
          <view v-for="(item,index) in orderList" :key="item.id">
            <view class="shopDetails" @click="toDish(item)">
              <view class="left">
                <image :src="'/api/common/download?name='+item.image"></image>
              </view>
              <view class="right">
                <view class="rightTitleBox">
                  <h1>{{ item.name }}</h1>
                  <image src="../../static/home/recommends/ellipsis-v.png" class="ellipsis"></image>
                </view>
                <view class="rightFirstBox">
                  <view class="rightFirstBoxLeft">
                    <text>{{ item.scode }}分</text>
                    <text>月售{{ item.sales }}</text>
                  </view>
                  <view class="rightFirstBoxRight">
                    <text>{{ item.time }}分钟</text>
                    <text>{{ item.distance }}</text>
                  </view>
                </view>
                <view class="rightSecondBox">

                  <text>价格￥{{ item.price }}</text>
                  <view>
                    <text>配送￥0</text>
                    <text class="oldPrice">￥4</text>
                  </view>

                </view>
                <view class="number-selector">

                  <view class="selector" @tap.stop.prevent>
                    <uni-number-box v-model="item.number" :min="0" :max="10"
                                    @change="localHandleChange(item)">
                    </uni-number-box>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper_item">
        <scroll-view class="recommendDetails" scroll-y="true">
          <view v-for="(item,index) in orderHis" :key="item.id">
            <view class="shopDetails">
              <!--    @click="confirm(item)"-->
              <view class="left1">
                <image :src="'/api/common/download?name='+item.image"></image>
              </view>
              <view class="right">
                <view class="rightTitleBox">
                  <h1>{{ item.businessName }}</h1>
                  <!--                  <image src="../../static/home/recommends/ellipsis-v.png" class="ellipsis"></image>-->
                </view>
                <view class="rightFirstBox">
                  <view class="rightFirstBoxLeft">
                    <text>下单时间：{{ item.checkoutTime }}</text>
                  </view>
                </view>
                <view class="rightSecondBox">
                  <text>订单总额:￥{{ item.amount }}</text>
                  <view>
                    <text>配送￥0</text>
                    <text class="oldPrice">￥4</text>
                  </view>
                </view>
                <view class="number-selector">
                  <view class="rightThirdBox">
                    <view>
                      <text>{{ getStatusText(item.status) }}</text>
                    </view>
                  </view>
                </view>
              </view>
              <button v-if="item.status===5"
                      style="width:150rpx;height:60rpx;background-color: #FA877D;color: white;border-radius: 10rpx;font-size:10px;"
                      @tap.stop.prevent="open(item.id)">
                结束订单
              </button>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

  </view>
</template>

<script>
import Tabbar from '@/components/tabbar/tabbar.vue'
import ListView from "@/components/list-view/list-view.vue";
import sTabs from '../../components/s-tabs/index.vue';
import sTab from '../../components/s-tab/index.vue';
import {getOrders, getStatusText, handleChange, toDish} from "@/common/common";
import {addOrderApi, getCartApi, getInfoApi, getOrderApi, loginApi, updateStautsApi, userGet} from "@/network/api";
import {getTokenId} from "@/common/auth";

export default {
  components: {
    'view-tabbar': Tabbar,
    ListView
  },
  data() {
    return {
      orderId: 0,
      orderList: [],
      orderHis: [],
      current: "1",
      scrollTop: 0,
      navIndex: 0,
      tabBars: [{
        name: '未提交',
        id: 'order'
      }, {
        name: '已提交',
        id: 'history'
      }],
    }
  },
  onShow() {
    uni.hideTabBar({
      animation: false
    })
    this.getData()
  },
  methods: {
    checkIndex(index) {
      this.navIndex = index;
      console.log(index)
    },
    scroll: function (e) {
      console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },
    //滑动切换swiper
    tabChange(e) {
      const navIndex = e.detail.current
      this.navIndex = navIndex
    }, getStatusText,
    toDish,
    localHandleChange(e) {
      const _this = this
      handleChange(e)
      this.orderList = getOrders()
    },
    getData() {
      const _this = this
      this.orderList = getOrders()
      getOrderApi().then(res => {
        Object.assign(_this.orderHis, res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    change(index) {


    }, close() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

      this.$refs.popup.close()
    }, open(id) {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.orderId = id
      this.$refs.popup.open()
    },
    finishOrder() {
      // 输入框的值

      // TODO 做一些其他的事情，手动执行 close 才会关闭对话框
      updateStautsApi({
        id: this.orderId,
        status: 7,
      }).then(res => {

        uni.showToast({
          title: '订单已结束',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })

        window.location.reload()
        this.getData()
        this.$refs.popup.close()
      })



    },
    render(index) {
      console.log('render:', index);
    },
    confirm() {
      uni.navigateTo({
        url: '../updataPage/updataPage'
      });
    },
    pushHome() {
      uni.switchTab({
        url: '../home/home'
      });
    }
  }
}
</script>

<style scoped lang="less">
.activite {
  color: #FB766A;
}

.content {


  padding: 20rpx 5rpx 100rpx;
  min-height: 80vh; /* Use min-height instead of height */
  overflow: hidden; /* prevent content from overflowing */
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  color: #CCCCCC;
}

.scroll-view-item_H {
  display: inline-block;
  width: 50%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  padding: 10px 0;
  font-size: 32rpx;

}


.submit {
  bottom: 100rpx;
  position: fixed;
  z-index: 99;
  width: 100%;


  .submitButton {
    margin: 5rpx;
    background-color: #FA877D;
    color: white;
    border-radius: 50rpx;
    float: right;
    font-size: 15px;
  }
}


.contentBox {
  text-align: center;
  margin-top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);


  .tips {
    color: #727272;
    font-size: 30rpx;
  }

  .tipsButton {
    width: 100rpx;
    height: 40rpx;
    background-color: #FB766A;
    padding: 10rpx 24rpx;
    border-radius: 40rpx;
    margin: 40rpx auto;
    color: white;
  }
}


.recommendDetails {
  margin-bottom: 190rpx;
  height: 80vh;

  .shopDetails {
    display: flex;
    box-sizing: content-box;
    padding: 10rpx 20rpx;


    .left {
      margin-right: 20rpx;

      image {
        width: 160rpx;
        height: 160rpx;
      }
    }


    .left1 {
      margin-right: 20rpx;

      image {
        width: 20rpx;
        height: 160rpx;
      }
    }


    .right {
      width: 76%;

      .rightTitleBox {
        display: flex;
        justify-content: space-between;

        .ellipsis {
          margin-top: 10rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }


      .rightFirstBox {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        margin-top: 8rpx;
        color: #575757;

        .rightFirstBoxLeft {
          text:first-child {
            margin-right: 20rpx;
            color: #E36515;
          }
        }

        .rightFirstBoxRight {
          text:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .rightSecondBox {
        display: flex;
        font-size: 24rpx;
        color: #575757;
        margin-top: 8rpx;

        view {

          text:first-child {
            margin-left: 20rpx;
          }

          .oldPrice {
            color: #B1B1B1;
            font-size: 22rpx;
            text-decoration: line-through;
            margin-left: 4rpx;
          }
        }

      }

      .number-selector {
        display: flex;

        .rightThirdBox {

          margin-top: 6rpx;
          width: 130rpx;
          background-color: #FFEEE2;
          font-size: 22rpx;
          color: #D1651F;
          border-radius: 6rpx;
          text-align: center;
          padding: 4rpx;
        }

        .selector {
          padding-left: 24rpx;
        }
      }

      .rightFourth {
        height: 26rpx;
        overflow: hidden;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-wrap: wrap;

        font-size: 22rpx;
        color: #DE6050;

        .cutBox {
          border-radius: 8rpx;
          padding: 2rpx 6rpx;
          margin-right: 10rpx;
          margin-top: 10rpx;
          border: 1px solid #F7C7C1;
        }
      }

      h1 {
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
}
</style>

